<template>
  <div>
    <p class="parkTitle">新增停车场</p>
    <div class="parkContent">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="停车场编号">
          <el-input v-model="formInline.user" placeholder="停车场编号" />
        </el-form-item>
        <el-form-item label="停车场名称">
          <el-select v-model="formInline.region" class="small-ipt">
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="所属区域">
          <el-select v-model="formInline.region" placeholder="省">
            <el-option label="省" value="shanghai" />
          </el-select>
          <el-select v-model="formInline.region" class="small-ipt" placeholder="市">
            <el-option label="市" value="shanghai" />
          </el-select>
          <el-select v-model="formInline.region" class="small-ipt" placeholder="区">
            <el-option label="区" value="shanghai" />
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="所属区域">
          <el-input v-model="formInline.user" />
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="泊位总数量">
          <el-input v-model="formInline.user" placeholder="停车场编号" />
        </el-form-item>
        <el-form-item label="剩余泊位数">
          <el-select v-model="formInline.region" class="small-ipt">
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="停车场属性">
          <el-input v-model="formInline.user" />
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="收费规则">
          <el-input v-model="formInline.user" />
        </el-form-item>
      </el-form>

      <el-form class="demo-form-inline">
        <el-form-item label="停车场照片" class="parkPic">
          <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>

        </el-form-item>
      </el-form>

      <el-form class="demo-form-inline">
        <el-form-item label="停车场位置" class="parkPic">
          <baidu-map class="map" center="合肥" :zoom="15" scroll-wheel-zoom="true">
          <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        </baidu-map>
        <el-button type="primary" @click="addParking" class="addBtn">新增停车场</el-button>
        </el-form-item>
      </el-form>

    </div>

  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { addCates } from '@a/home'
import{ ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const formInline = reactive({
  user: '',
  region: '',
})


// 新增停车场
const addParking = () => { 
    addCates().then(res => {
    if(res.data.code === 200) {
      ElMessage({
        type:'success',
        message: res.data.msg,
        duration: 1500,
        onClose: () => {
          router.go(0)
        }
      })
    }
  })
}
</script>

<style scoped>
.addBtn{
  margin-left: 80px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
  border: 1px solid gray;
}

:deep .parkTitle {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #F0F1F2;
  padding-left: 20px;

}

.parkContent{
  padding-left: 50px;
}

.parkPic{
  align-items: center
}

.map {
  /* margin: 20px auto; */
  width: 500px;
  height: 200px;
}
:deep .el-form-item__content{
  flex: none;
}
</style>